<template>
    <div v-show="dialogtrue">
        <div class="topdialog" @click="tccfalse">
            <div class="tcc">
                <div class="top">
                    <span>标题</span>
                    <span @click="dialogfalse">X</span>
                </div>
                <div>
                    <div>
                        <slot name="cont">这是一段内容</slot>
                    </div>
                </div>
                <div class="button">
                    <slot name="butadd">
                    </slot>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        dialogtrue: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {

        }
    },
    methods: {
        //关闭弹出层
        dialogfalse() {
            this.$emit("del", !this.dialogtrue)
        },

        //点击遮罩层
        tccfalse() {
            this.$emit("tccfalse", !this.dialogtrue)
        }
    },
    created() {

    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.topdialog {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);

    .tcc {
        padding: 10px;
        box-sizing: border-box;
        width: 500px;
        height: 300px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .button {
            position: absolute;
            right: 20px;
            bottom: 20px;

            button {
                padding: 10px 20px;
                box-sizing: border-box;
                margin-right: 20px;
                border: 0;
            }
        }
    }

}
</style>
